<template>
  <div>
    <el-upload
      :action="url"
      :on-success="success"
      :auto-upload="true"
      :before-upload="before"
      :show-file-list="false"
    >
      <el-button type="primary">点击上传</el-button>
    </el-upload>
    <el-image-viewer
      v-if="dialogVisible"
      :url-list="picture"
      @close="close"
    />
    <div style="margin-top: 10px;" v-if="type=='text'||''">
      <div class="textList" v-for="(item,index) in fileValue">
        <span class=" iconfont icon-wenjian2" style="margin-right: 5px;font-size: 19px;"></span>
        {{ item }}
        <span class="iconfont icon-guanbi1" @click="remove(index)"></span>
      </div>
    </div>
    <div v-else style="margin-top: 10px;">
      <div @click="handlePictureCardPreview(item)" class="picList" v-for="(item,index) in fileValue">
        <Picture @click.stop="" style="margin-right: 10px;" :path="item"></Picture>
        <div>{{ item }}</div>
        <span class="iconfont icon-guanbi1 close" @click.stop="remove(index)"></span>
      </div>
    </div>
  </div>
</template>

import { pushScopeId } from 'vue';
<script lang="ts" setup>
import Picture from "@/components/Picture/index.vue"
import { ref, defineProps, defineEmits,watch,toRefs } from "vue";
import { Delete, Download, Plus, ZoomIn } from "@element-plus/icons-vue";
import { ElNotification } from "element-plus";
import type { UploadFile } from "element-plus";
const emits = defineEmits(["update:modelValue"]);
const dialogVisible = ref(false);
const props = defineProps({
  type: {
    type: String,
    default: "",
  },
  // 是否是个数组
  upload_list: {
    type: Boolean,
    default:false
  },
  limit:{
    type:Number,
    default:1
  },
  modelValue:{
    required:true
  }
});
const { type, upload_list,modelValue,limit} = toRefs(props);
const fileValue:any = ref([]);
watch(modelValue,(val:any)=>{
  fileValue.value = typeof(val) == 'string'?[val]:val
})

const url: any = ref(import.meta.env.VITE_APP_UPLOAD);
const picture:any = ref([])

// 移出图片
const remove = (index:Number) => {
  fileValue.value.splice(index,1)
};

function success(file: any) {
  if(upload_list){
    fileValue.value.push(file.data);
  }else{
    fileValue.value=[file.data]
  }
  emits("update:modelValue", upload_list.value ? fileValue.value : fileValue.value[0]);
}

// 浏览大图
const handlePictureCardPreview = (file: any) => {
  picture.value =[file]
  dialogVisible.value = true;
};


function close(){
  dialogVisible.value = false;
  picture.value = []
}

// watch(fileValue,(val)=>{
//   emits("update:modelValue", upload_list.value ? val : val[0]);
// })
function before(){
  if(fileValue.value.length==limit){
      ElNotification({
      title: "操作失败",
      message: "超出上传个数,请先删除",
      duration: 2000,
      type: "warning",
    });
    return false
  }
}
</script>

<style lang="scss" scoped>
.textList{
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
}
.textList:hover{
 background-color: #e3e3e3; 
 border-radius: 4px;
}
.picList{
  position: relative;
  padding: 5px;
  display: flex;
  align-items: center;
  border: 1px solid var(--el-border-color);
  border-radius: 5px;
  cursor: pointer;
  margin: 5px;
}
.close{
  position: absolute;
  right: 5px;
  top: 5px;
}
</style>
